import React from "react";
import ProForm, { ProFormText } from "@ant-design/pro-form";
import { message, Modal } from "antd";
import { editUser } from "@/services/user"

const AddUser: React.FC = (props) => {
  const { isEditModalVisible, actionRef, setEditModalStatus, data } = props;

  const onEditUser = async (values) => {
    const rep = await editUser(data.id, values);
    if (rep.status === undefined) {
      message.success("编辑成功");

      // 刷新表格数据(由 ant-pro-components 提供)
      actionRef.current.reload();

      // 关闭模态框
      setEditModalStatus(false)
    }
  }

  return (
    <Modal
      title="编辑用户"
      visible={isEditModalVisible}
      footer={null}
      onCancel={() => { setEditModalStatus(false) }}
      destroyOnClose={true}
    >
      <ProForm
        initialValues={data}
        onFinish={(values) => onEditUser(values)}
        submitter={{
          render: (props) => {
            return [
              <button
                type="button"
                key="submit"
                className="ant-btn ant-btn-primary"
                onClick={() => props.form?.submit?.()}
              >
                提交
              </button>,
            ];
          },
        }}
      >
        <ProFormText
          name="name"
          label="昵称"
          placeholder="请输入昵称"
          rules={[{ required: true, message: "昵称为必填项" }]}
        />
        <ProFormText
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
          rules={[
            {
              required: true,
              message: '邮箱必填项',
            },
            {
              type: 'email',
              message: '请输入正确的邮箱格式'
            }
          ]}
        />
      </ProForm>
    </Modal >
  )
};

export default AddUser;
